<script setup lang="ts">
import { ref } from 'vue';

const emits = defineEmits(['addFn']);
const input = ref('');
const add = () => {
  if (input.value.trim()) {
    emits('addFn', input.value);
    input.value = '';
  }
};
</script>

<template>
  <header class="header">
    <h1>todos</h1>
    <input class="new-todo" placeholder="What needs to be done?" autofocus v-model="input" @keydown.enter="add" />
  </header>
</template>

<style lang="less" scoped></style>
